<template>
	<view :class="formItem.config.class" v-if="notes && notes.length">
		<template v-if="formItem.config.model == 'appModel3'">
			<view class="notes-title-content flex-normal">
				<view class="title-content flex-center">        
					<text class="title-txt"
					:style="{
						'font-family': setAttr('title', 'fontFamily'),
						'font-size': pxToRpx(setAttr('title', 'fontSize')),
						'color': setAttr('title', 'color'),
					}">{{ setAttr('title', 'text')}}</text>
				</view>
			</view>
			<view class="notes-content" :style="{
				'background-color': setAttr('formItem', 'backgroundColor'),
				'border-radius': pxToRpx(setAttr('formItem', 'borderRadius')),
			}">
				<view class="notes-list">
					<view class="model-item" 
					:style="{
						'font-family': setAttr('notes', 'fontFamily'),
						'font-size': pxToRpx(setAttr('notes', 'fontSize')),
						'color': setAttr('notes', 'color'),
					}"
					v-for="(note, index) in notes" :key="note">{{index + 1}}、{{ note }}</view>
				</view>
			</view>
		</template>		
		<template v-if="formItem.config['model'] == 'appModel5'">
			<view class="model-5-content">
				<view class="title-content flex-center">
					<text class="title-txt"
						:style="{
							'font-family': setAttr('title', 'fontFamily'),
							'font-size': pxToRpx(setAttr('title', 'fontSize')),
							'color': setAttr('title', 'color'),
						}">{{ setAttr('title', 'text')}}</text>
				</view>
				<view class="notes-content">
					<view class="notes-list"
						:style="{
							'font-family': setAttr('notes', 'fontFamily'),
							'font-size': pxToRpx(setAttr('notes', 'fontSize')),
							'color': setAttr('notes', 'color'),
						}">
						<view class="note-item flex-normal" v-for="(note, index) in notes" :key="note">
							<text class="note-index flex-center">0{{ index + 1 }}</text>
							<text class="note-txt">{{ note }}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {pxToRpx} from './tools.js'
	import { mapGetters } from 'vuex'
	export default {
		props: {
			formItem:{
				type: Object,
				default: {}
			}
		},
		computed: {
		  ...mapGetters(['vuex_activity', 'vuex_h5Config']),
			notes(){
				let _self = this, {remarks = ''} = this.vuex_activity
				let arr = (remarks || '').split(/[(\r\n)\r\n]+/), list = []
				arr.forEach((i, idx) => {
					if(i.trim() != ''){
						list.push(i)
					}
				})
				return list
			},
		},
		data(){
			return {
			}
		},
		methods: {
			pxToRpx: pxToRpx,
			setAttr(configKey, valKey){
				let _self = this
				if(configKey == 'formItem'){
					return _self.formItem['configH5'][valKey]
				}else{
					if(!_self.formItem[configKey]) return
					return _self.formItem[configKey]['configH5'][valKey]
				}				
			},
		}
	}
</script>

<style lang="scss" scoped>
	// px 转为 rpx 的函数
	@function rem($px) {
	  @return $px * 1rpx;
	}
	.app-model-3.notes-model{
		position: relative;
		padding-top: 50rpx;
		.notes-title-content{
			min-width: 310rpx;
			height: 85rpx;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #FECD8A;
			border-radius: 10rpx;
			.title-content{
				position: relative;
				flex: 1;
				&::after, &::before{
					content: '';
					position: absolute;
					width: 14rpx;
					height: 14rpx;
					top: 50%;
					transform: translateY(-50%);
					background-color: #fff;
					border-radius: 50%;
				}
				&::before{
					left: 50rpx;
				}
				&::after{
					right: 50rpx;
				}
			}
		}
		.notes-content{
			padding: 70rpx 40rpx 30rpx;
			.model-item{
				margin-bottom: 10rpx;
			}
		}
	}
  .app-model-5.notes-model{
    .model-5-content{
      border-radius: rem(10);
      box-shadow: rem(3) 0 rem(7) 0 #1863B2;
      .title-content{
        height: rem(137);
        background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
        background-size: contain;
        font-weight: bold;
      }
      .notes-content{
        padding: rem(36);
        .note-item{
          position: relative;
          height: rem(98);
          background: linear-gradient(to bottom, #FFFFFF, #D1EEFE);
          border-radius: rem(12);
          border: rem(1) solid #3288CE;
          margin-bottom: rem(20);
          padding-left: rem(110);
          &:last-child{
            margin-bottom: 0;
          }
          .note-index{
            position: absolute;
            background: linear-gradient(to bottom, #1964B3, #47A5E3);
            height: rem(68);
            width: rem(68);
            border-radius: 50%;
            font-size: rem(21);
            color: #fff;
            font-weight: bold;
            top: 50%;
            transform: translateY(-50%);
            left: rem(20);
          }
        }
      }
    }
  }
</style>